<template>
  <div class="create-bg">
    <el-container class="create-container">
      <!-- 顶部导航栏 -->
      <el-header class="top-header">
        <div class="header-left">
          <el-button @click="goBack" icon="el-icon-arrow-left" type="text">返回</el-button>
          <h2>新建项目 - {{ mode === 'tool' ? '工具箱模式' : '开发者模式' }}</h2>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="saveProject">保存项目</el-button>
          <el-button type="success" @click="exportProject">导出项目</el-button>
        </div>
      </el-header>

      <el-container class="main-content">
        <!-- 左侧面板 -->
        <el-aside width="280px" class="left-panel">
          <!-- 模式切换 -->
          <el-card class="mode-switch-card">
            <template #header>
              <div class="card-header">
                <span>工作模式</span>
              </div>
            </template>
            <div class="mode-buttons">
              <el-button
                :type="mode === 'tool' ? 'primary' : 'default'"
                class="mode-btn"
                @click="switchMode('tool')"
                size="large">
                <i class="el-icon-s-tools"></i>
                工具箱模式
              </el-button>
              <el-button
                :type="mode === 'dev' ? 'primary' : 'default'"
                class="mode-btn"
                @click="switchMode('dev')"
                size="large">
                <i class="el-icon-edit-outline"></i>
                开发者模式
              </el-button>
            </div>
          </el-card>

          <!-- 资源管理 -->
          <el-card class="resource-card">
            <template #header>
              <div class="card-header">
                <span>{{ mode === 'tool' ? '数据集管理' : '项目文件' }}</span>
                <el-button 
                  type="text" 
                  @click="mode === 'tool' ? importDataset() : createNewFile()"
                  size="small">
                  <i class="el-icon-plus"></i>
                </el-button>
              </div>
            </template>
            
            <!-- 工具箱模式：数据集列表 -->
            <div v-if="mode === 'tool'" class="resource-list">
              <el-input 
                placeholder="搜索数据集" 
                size="small" 
                prefix-icon="el-icon-search"
                v-model="datasetSearch"
                class="search-input" />
              <div class="list-items">
                <div 
                  v-for="dataset in filteredDatasets" 
                  :key="dataset.id" 
                  class="list-item"
                  @click="useDataset(dataset)">
                  <i class="el-icon-document"></i>
                  <span class="item-name">{{ dataset.name }}</span>
                  <el-tag size="mini" type="info">{{ dataset.type || 'CSV' }}</el-tag>
                </div>
              </div>
            </div>

            <!-- 开发者模式：文件树 -->
            <div v-else class="file-tree-container">
              <el-tree
                :data="fileTree"
                :props="defaultProps"
                @node-click="handleNodeClick"
                default-expand-all
                class="file-tree">
                <template #default="{ node, data }">
                  <span class="custom-tree-node">
                    <i :class="getFileIcon(data.type)"></i>
                    <span>{{ node.label }}</span>
                  </span>
                </template>
              </el-tree>
            </div>
          </el-card>
        </el-aside>

        <!-- 中间主内容区 -->
        <el-main class="center-panel">
          <!-- 工具箱模式内容 -->
          <div v-if="mode === 'tool'" class="toolbox-content">
            <!-- 模型选择区域 -->
            <el-card class="model-selection-card">
              <template #header>
                <div class="card-header">
                  <span>可用模型</span>
                  <div class="header-actions">
                    <el-input 
                      placeholder="搜索模型" 
                      size="small" 
                      prefix-icon="el-icon-search"
                      v-model="modelSearch"
                      style="width: 200px; margin-right: 10px;" />
                    <el-button type="text" @click="refreshModels" size="small">
                      <i class="el-icon-refresh"></i>
                    </el-button>
                  </div>
                </div>
              </template>
              
              <el-row :gutter="20">
                <el-col :span="8" v-for="model in filteredModels" :key="model.id">
                  <el-card 
                    class="model-card" 
                    shadow="hover" 
                    @click="selectModel(model)"
                    :class="{ 'selected': selectedModel?.id === model.id }">
                    <div class="model-info">
                      <div class="model-icon">
                        <i :class="model.icon"></i>
                      </div>
                      <h3>{{ model.name }}</h3>
                      <p>{{ model.description }}</p>
                      <div class="model-tags">
                        <el-tag v-for="tag in model.tags" :key="tag" size="small">{{ tag }}</el-tag>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>

            <!-- 参数配置区域 -->
            <el-card class="config-card" v-if="selectedModel">
              <template #header>
                <div class="card-header">
                  <span>模型配置 - {{ selectedModel.name }}</span>
                  <el-button type="text" @click="resetConfig" size="small">
                    <i class="el-icon-refresh-left"></i> 重置
                  </el-button>
                </div>
              </template>
              
              <el-form :model="modelConfig" label-width="120px" class="config-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="输入数据">
                      <el-select v-model="modelConfig.inputData" placeholder="选择输入数据集" style="width: 100%;">
                        <el-option
                          v-for="dataset in availableDatasets"
                          :key="dataset.id"
                          :label="dataset.name"
                          :value="dataset.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="输出路径">
                      <el-input v-model="modelConfig.outputPath" placeholder="设置输出路径"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-form-item label="模型参数">
                  <el-input
                    type="textarea"
                    v-model="modelConfig.parameters"
                    :rows="6"
                    placeholder="输入模型参数（JSON格式）">
                  </el-input>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="runModel" :loading="isRunning">
                    <i class="el-icon-video-play"></i>
                    {{ isRunning ? '运行中...' : '运行模型' }}
                  </el-button>
                  <el-button @click="resetConfig">重置配置</el-button>
                </el-form-item>
              </el-form>
            </el-card>

            <!-- 运行状态区域 -->
            <el-card class="status-card" v-if="isRunning">
              <template #header>
                <div class="card-header">
                  <span>运行状态</span>
                  <el-tag :type="runStatus === 'success' ? 'success' : 'warning'">
                    {{ runStatusText }}
                  </el-tag>
                </div>
              </template>
              
              <el-progress :percentage="runProgress" :status="runStatus" :stroke-width="8"></el-progress>
              <div class="status-info">
                <p><i class="el-icon-time"></i> 预计剩余时间: {{ estimatedTime }}</p>
                <p><i class="el-icon-info"></i> 当前状态: {{ runStatusText }}</p>
              </div>
            </el-card>
          </div>
          
          <!-- 开发者模式内容 -->
          <div v-else class="developer-content">
            <!-- 代码编辑器 -->
            <el-card class="editor-card">
              <template #header>
                <div class="card-header">
                  <span>代码编辑器</span>
                  <div class="editor-toolbar">
                    <el-select v-model="currentLanguage" placeholder="选择语言" size="small">
                      <el-option label="Python" value="python"></el-option>
                      <el-option label="JavaScript" value="javascript"></el-option>
                      <el-option label="TypeScript" value="typescript"></el-option>
                      <el-option label="JSON" value="json"></el-option>
                    </el-select>
                    <el-button size="small" @click="saveCode">
                      <i class="el-icon-document-checked"></i> 保存
                    </el-button>
                    <el-button size="small" type="success" @click="runCode">
                      <i class="el-icon-video-play"></i> 运行
                    </el-button>
                    <el-button size="small" type="warning" @click="formatCode">
                      <i class="el-icon-magic-stick"></i> 格式化
                    </el-button>
                  </div>
                </div>
              </template>
              
              <div class="editor-wrapper">
                <textarea
                  v-model="currentCode"
                  class="code-textarea"
                  :placeholder="getPlaceholder(currentLanguage)"
                  @input="handleCodeChange">
                </textarea>
              </div>
            </el-card>

            <!-- 运行输出 -->
            <el-card class="output-card" v-if="outputContent">
              <template #header>
                <div class="card-header">
                  <span>运行输出</span>
                  <el-button type="text" @click="clearOutput" size="small">
                    <i class="el-icon-delete"></i> 清空
                  </el-button>
                </div>
              </template>
              <div class="output-content">
                <pre>{{ outputContent }}</pre>
              </div>
            </el-card>
          </div>
        </el-main>
        
        <!-- 右侧面板 -->
        <el-aside width="280px" class="right-panel">
          <!-- 模型库 -->
          <el-card class="model-library-card">
            <template #header>
              <div class="card-header">
                <span>模型库</span>
                <el-button type="text" @click="importModel" size="small">
                  <i class="el-icon-plus"></i>
                </el-button>
              </div>
            </template>
            
            <el-input 
              placeholder="搜索模型" 
              size="small" 
              prefix-icon="el-icon-search"
              v-model="modelSearch"
              class="search-input" />
            
            <div class="model-list">
              <div 
                v-for="model in filteredModels" 
                :key="model.id" 
                class="model-item"
                @click="selectModel(model)"
                :class="{ 'selected': selectedModel?.id === model.id }">
                <i :class="model.icon"></i>
                <div class="model-details">
                  <span class="model-name">{{ model.name }}</span>
                  <span class="model-desc">{{ model.description }}</span>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 项目信息 -->
          <el-card class="project-info-card">
            <template #header>
              <div class="card-header">
                <span>项目信息</span>
              </div>
            </template>
            
            <div class="project-info">
              <div class="info-item">
                <label>项目名称:</label>
                <el-input v-model="projectName" placeholder="输入项目名称" size="small"></el-input>
              </div>
              <div class="info-item">
                <label>创建时间:</label>
                <span>{{ currentTime }}</span>
              </div>
              <div class="info-item">
                <label>当前模式:</label>
                <el-tag :type="mode === 'tool' ? 'primary' : 'success'">
                  {{ mode === 'tool' ? '工具箱' : '开发者' }}
                </el-tag>
              </div>
            </div>
          </el-card>
        </el-aside>
      </el-container>
    </el-container>

    <!-- 导入模型对话框 -->
    <el-dialog title="导入模型" v-model="importModelDialog" width="500px">
      <el-form :model="importForm" label-width="100px">
        <el-form-item label="模型名称">
          <el-input v-model="importForm.name" placeholder="输入模型名称"></el-input>
        </el-form-item>
        <el-form-item label="模型文件">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleModelFileChange">
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">支持 .pkl, .h5, .pt 格式文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="模型描述">
          <el-input type="textarea" v-model="importForm.description" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="importModelDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmImportModel">确认导入</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导入数据集对话框 -->
    <el-dialog title="导入数据集" v-model="importDatasetDialog" width="500px">
      <el-form :model="datasetForm" label-width="100px">
        <el-form-item label="数据集名称">
          <el-input v-model="datasetForm.name" placeholder="输入数据集名称"></el-input>
        </el-form-item>
        <el-form-item label="数据集文件">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleDatasetFileChange">
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">支持 .csv, .json, .xlsx 格式文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="数据集描述">
          <el-input type="textarea" v-model="datasetForm.description" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="importDatasetDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmImportDataset">确认导入</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新建文件对话框 -->
    <el-dialog title="新建文件" v-model="newFileDialog" width="400px">
      <el-form :model="newFileForm" label-width="80px">
        <el-form-item label="文件名">
          <el-input v-model="newFileForm.name" placeholder="输入文件名"></el-input>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-select v-model="newFileForm.type" placeholder="选择文件类型">
            <el-option label="Python文件" value="python"></el-option>
            <el-option label="JavaScript文件" value="javascript"></el-option>
            <el-option label="JSON文件" value="json"></el-option>
            <el-option label="配置文件" value="config"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="newFileDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmNewFile">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 悬浮智能助手 -->
    <AIAssistant />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import AIAssistant from '../components/AIAssistant.vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const mode = ref('dev') // 默认开发者模式
const projectName = ref('未命名项目')
const currentTime = ref(new Date().toLocaleString())

// 搜索功能
const modelSearch = ref('')
const datasetSearch = ref('')

// 工具箱模式数据
const availableModels = ref([
  {
    id: 1,
    name: '图像分类模型',
    description: '基于深度学习的图像分类模型',
    icon: 'el-icon-picture',
    tags: ['CNN', '图像处理', '分类']
  },
  {
    id: 2,
    name: '目标检测模型',
    description: 'YOLO系列目标检测模型',
    icon: 'el-icon-view',
    tags: ['YOLO', '目标检测', '实时']
  },
  {
    id: 3,
    name: '语义分割模型',
    description: 'U-Net语义分割模型',
    icon: 'el-icon-crop',
    tags: ['U-Net', '语义分割', '医学图像']
  }
])

const availableDatasets = ref([
  { id: 1, name: 'CIFAR-10数据集', type: 'CSV' },
  { id: 2, name: 'ImageNet数据集', type: 'JSON' },
  { id: 3, name: 'COCO数据集', type: 'CSV' }
])

const selectedModel = ref(null)
const modelConfig = reactive({
  inputData: '',
  outputPath: '',
  parameters: ''
})

const isRunning = ref(false)
const runProgress = ref(0)
const runStatus = ref('active')
const runStatusText = ref('准备中...')
const estimatedTime = ref('--')

// 开发者模式数据
const fileTree = ref([
  {
    id: 1,
    label: 'src',
    type: 'folder',
    children: [
      {
        id: 2,
        label: 'main.py',
        type: 'python'
      },
      {
        id: 3,
        label: 'utils.py',
        type: 'python'
      }
    ]
  },
  {
    id: 4,
    label: 'config',
    type: 'folder',
    children: [
      {
        id: 5,
        label: 'settings.json',
        type: 'json'
      }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

const currentLanguage = ref('python')
const currentCode = ref(`# 主程序文件
import pandas as pd
import numpy as np
from sklearn.model_selection import train_test_split

def load_data():
    """加载数据集"""
    # 在这里加载您的数据集
    pass

def preprocess_data(data):
    """数据预处理"""
    # 在这里进行数据预处理
    pass

def train_model(X_train, y_train):
    """训练模型"""
    # 在这里训练您的模型
    pass

if __name__ == "__main__":
    print("开始运行...")
    # 主程序逻辑
`)
const outputContent = ref('')

// 对话框状态
const importModelDialog = ref(false)
const importDatasetDialog = ref(false)
const newFileDialog = ref(false)

const importForm = reactive({
  name: '',
  description: '',
  file: null
})

const datasetForm = reactive({
  name: '',
  description: '',
  file: null
})

const newFileForm = reactive({
  name: '',
  type: 'python'
})

// 计算属性
const filteredModels = computed(() => {
  if (!modelSearch.value) return availableModels.value
  return availableModels.value.filter(model => 
    model.name.toLowerCase().includes(modelSearch.value.toLowerCase()) ||
    model.description.toLowerCase().includes(modelSearch.value.toLowerCase())
  )
})

const filteredDatasets = computed(() => {
  if (!datasetSearch.value) return availableDatasets.value
  return availableDatasets.value.filter(dataset => 
    dataset.name.toLowerCase().includes(datasetSearch.value.toLowerCase())
  )
})

// 方法
function goBack() {
  router.go(-1)
}

function switchMode(newMode) {
  mode.value = newMode
  // 重置相关状态
  if (newMode === 'tool') {
    selectedModel.value = null
    resetConfig()
  } else {
    outputContent.value = ''
  }
}

function saveProject() {
  ElMessage.success('项目保存成功！')
}

function exportProject() {
  ElMessage.success('项目导出成功！')
}

// 工具箱模式方法
function selectModel(model) {
  selectedModel.value = model
  modelConfig.inputData = ''
  modelConfig.outputPath = ''
  modelConfig.parameters = ''
}

function refreshModels() {
  console.log('刷新模型列表')
  ElMessage.info('模型列表已刷新')
}

function importModel() {
  importModelDialog.value = true
}

function handleModelFileChange(file) {
  importForm.file = file
}

function confirmImportModel() {
  console.log('导入模型:', importForm)
  importModelDialog.value = false
  importForm.name = ''
  importForm.description = ''
  importForm.file = null
  ElMessage.success('模型导入成功！')
}

function runModel() {
  if (!selectedModel.value) {
    ElMessage.warning('请先选择模型')
    return
  }
  
  isRunning.value = true
  runProgress.value = 0
  runStatus.value = 'active'
  runStatusText.value = '正在运行...'
  
  const timer = setInterval(() => {
    runProgress.value += 10
    if (runProgress.value >= 100) {
      clearInterval(timer)
      runStatus.value = 'success'
      runStatusText.value = '运行完成'
      isRunning.value = false
      ElMessage.success('模型运行完成！')
    }
  }, 500)
}

function resetConfig() {
  modelConfig.inputData = ''
  modelConfig.outputPath = ''
  modelConfig.parameters = ''
}

// 开发者模式方法
function getFileIcon(type) {
  const icons = {
    folder: 'el-icon-folder',
    python: 'el-icon-document',
    javascript: 'el-icon-document',
    json: 'el-icon-document',
    config: 'el-icon-setting'
  }
  return icons[type] || 'el-icon-document'
}

function handleNodeClick(data) {
  if (data.type !== 'folder') {
    console.log('打开文件:', data.label)
  }
}

function createNewFile() {
  newFileDialog.value = true
}

function confirmNewFile() {
  const newFile = {
    id: Date.now(),
    label: newFileForm.name,
    type: newFileForm.type
  }
  
  fileTree.value.push(newFile)
  newFileDialog.value = false
  newFileForm.name = ''
  newFileForm.type = 'python'
  ElMessage.success('文件创建成功！')
}

function handleCodeChange() {
  // 代码变化处理
}

function saveCode() {
  console.log('保存代码:', currentCode.value)
  ElMessage.success('代码保存成功！')
}

function runCode() {
  outputContent.value = '正在运行代码...\n'
  
  setTimeout(() => {
    outputContent.value += '代码运行完成！\n'
    outputContent.value += '输出结果：\n'
    outputContent.value += 'Hello World!\n'
  }, 1000)
}

function clearOutput() {
  outputContent.value = ''
}

function formatCode() {
  ElMessage.info('代码格式化功能待实现')
}

// 通用方法
function importDataset() {
  importDatasetDialog.value = true
}

function handleDatasetFileChange(file) {
  datasetForm.file = file
}

function confirmImportDataset() {
  console.log('导入数据集:', datasetForm)
  importDatasetDialog.value = false
  
  availableDatasets.value.push({
    id: Date.now(),
    name: datasetForm.name,
    type: 'CSV'
  })
  
  datasetForm.name = ''
  datasetForm.description = ''
  datasetForm.file = null
  
  ElMessage.success('数据集导入成功！')
}

function useDataset(dataset) {
  const datasetCode = `# 使用数据集: ${dataset.name}
import pandas as pd

# 加载数据集
data = pd.read_csv('${dataset.name}.csv')
print(f"数据集 {dataset.name} 加载成功")
print(f"数据形状: {data.shape}")
`
  
  currentCode.value = datasetCode
  ElMessage.success(`已加载数据集: ${dataset.name}`)
}

function getPlaceholder(language) {
  const placeholders = {
    python: '# 在这里编写Python代码',
    javascript: '// 在这里编写JavaScript代码',
    typescript: '// 在这里编写TypeScript代码',
    json: '// 在这里编写JSON配置'
  }
  return placeholders[language] || '在这里编写代码'
}
</script>

<style scoped>
.create-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.create-container {
  height: calc(100vh - 40px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 0 24px;
  height: 60px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left h2 {
  margin: 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.header-right {
  display: flex;
  gap: 12px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧面板 */
.left-panel {
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  padding: 20px;
  overflow-y: auto;
}

.mode-switch-card,
.resource-card {
  margin-bottom: 20px;
}

.mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mode-btn {
  height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.search-input {
  margin-bottom: 16px;
}

.list-items {
  max-height: 300px;
  overflow-y: auto;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.list-item:hover {
  background: #e3f2fd;
}

.item-name {
  flex: 1;
  font-size: 14px;
}

.file-tree-container {
  max-height: 300px;
  overflow-y: auto;
}

.file-tree {
  background: transparent;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* 中间主面板 */
.center-panel {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #fff;
}

.toolbox-content,
.developer-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.model-selection-card,
.config-card,
.status-card,
.editor-card,
.output-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #f0f4ff 0%, #f8f9fa 100%);
  border-radius: 10px 10px 0 0;
  padding: 8px 16px;
  font-weight: 600;
  color: #409eff;
  border-bottom: 1px solid #e9ecef;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.model-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.model-card.selected {
  border-color: #409eff;
  background: #f0f9ff;
}

.model-info {
  text-align: center;
}

.model-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 12px;
}

.model-info h3 {
  margin: 12px 0 8px 0;
  color: #333;
  font-size: 16px;
}

.model-info p {
  color: #666;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.model-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.config-form {
  padding: 20px 0;
}

.status-info {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-info p {
  margin: 0;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editor-wrapper {
  min-height: 400px;
}

.code-textarea {
  width: 100%;
  height: 400px;
  background: #1e1e1e;
  color: #d4d4d4;
  border: none;
  outline: none;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  padding: 20px;
  border-radius: 8px;
}

.output-content {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  max-height: 300px;
  overflow-y: auto;
}

/* 右侧面板 */
.right-panel {
  background: #f8f9fa;
  border-left: 1px solid #e9ecef;
  padding: 20px;
  overflow-y: auto;
}

.model-library-card,
.project-info-card {
  margin-bottom: 20px;
}

.model-list {
  max-height: 300px;
  overflow-y: auto;
}

.model-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.model-item:hover {
  background: #e3f2fd;
}

.model-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #409eff;
}

.model-item i {
  font-size: 20px;
  color: #409eff;
}

.model-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.model-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.model-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

.project-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.info-item span {
  font-size: 14px;
  color: #666;
}

.upload-demo {
  width: 100%;
}

.el-card {
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(64,158,255,0.08), 0 1.5px 6px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s;
}
.el-card:hover {
  box-shadow: 0 8px 32px rgba(64,158,255,0.15), 0 3px 12px rgba(0,0,0,0.08);
}

.el-button--primary {
  background: linear-gradient(90deg, #4f8cff, #6ed0f6);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: background 0.3s;
}
.el-button--primary:hover {
  background: linear-gradient(90deg, #6ed0f6, #4f8cff);
}

.list-item, .model-item {
  transition: transform 0.15s, box-shadow 0.15s;
}
.list-item:hover, .model-item:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 16px rgba(64,158,255,0.08);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .left-panel,
  .right-panel {
    width: 240px;
  }
}

@media (max-width: 900px) {
  .create-container {
    flex-direction: column;
  }
  
  .main-content {
    flex-direction: column;
  }
  
  .left-panel,
  .right-panel {
    width: 100%;
    height: auto;
    max-height: 200px;
  }
  
  .center-panel {
    flex: 1;
  }
}
</style>
